<template>
  <div class="header">
    <div class="header-left">
    	<div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
    	<span class="iconfont">&#xe632;</span>
    	<input class="inputText" placeholder="输入城市/主题/景点" >
    </div>
    <router-link :to="'/city/'+currentCity" tag="div" class="header-right">
    	{{currentCity}}
    	<span class="iconfont arrow-icon">&#xe64a;</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
  	return {
  		currentCity: ''
  	}
  },
  mounted () {
  	this.currentCity = this.$store.state.currentCity
  }
}
</script>

<style lang="stylus">	
@import '~styles/varibles.styl'
    .header
		display: flex
		line-height: 43px
		background: $bgColor
		color: #fff
		.header-left
			width: 32px
			float: left
			.back-icon
				text-align: center
				font-size: 20px
		.header-input
			position: relative
			flex: 1
			background: #fff
			border-radius: 5px
			margin-top: 6px
			margin-left: 10px
			padding-left: 10px
			height: 32px
			line-height: 32px
			color: #ccc
			.inputText
				position: absolute
				width: 85%
				height: 90%
				line-height: 29px
				border: none
		.header-right
			width: 62px
			float: right
			text-align: center
			.arrow-icon
				font-size: 12px
				margin-left: -2px
</style>
